<template>
  <div class="my-home">
    <!-- 二级路由的出口 -->
    <div class="my-home-main">
      <router-view></router-view>
    </div>
    <!-- 底部的tabbar开始 -->
    <div class="my-home-tabbar">
      <van-tabbar v-model="active" route :active-color="icon.active" :inactive-color="icon.inactive">
        <van-tabbar-item to="/home/shop">
          <span>首页</span>
          <template #icon="props">
            <svg t="1651484363318" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="5570" width="18" height="18">
              <path
                d="M982.028557 404.405174 573.32303 83.942886c-34.918864-27.694272-89.619352-27.694272-124.538216 0L43.175542 404.577188c-13.933143 11.008903-16.169326 31.134554-5.332437 44.895683s31.134554 16.169326 44.895683 5.332437l13.073072-10.320847 0 387.547791c0 54.872501 56.936671 95.983874 107.852847 95.983874l639.892491 0c50.22812 0 84.1149-38.531161 84.1149-95.983874L927.672098 443.452377l14.449185 11.352931c5.84848 4.644381 12.729044 6.880564 19.781623 6.880564 9.460776 0 18.921552-4.128339 25.286074-12.213002C998.369898 435.539728 995.789686 415.414077 982.028557 404.405174zM607.897867 797.113388l0 66.741475-63.989249 0-63.989249 0-63.989249 0 0-66.741475 0-112.325214c0-37.155048 30.102469-77.234336 95.983874-77.234336 66.053418 0 95.983874 40.079288 95.983874 77.234336L607.897867 797.113388 607.897867 797.113388z"
                p-id="5571" :fill="props.active ? icon.active : icon.inactive"></path>
            </svg>
          </template>
        </van-tabbar-item>
        <van-tabbar-item to="/home/classify">
          <span>分类</span>
          <template #icon="props">
            <svg t="1651484252946" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="4709" width="18" height="18">
              <path
                d="M881.536 439.104a161.152 161.152 0 0 1-227.776 0l-63.168-63.232a161.024 161.024 0 0 1 0-227.776l63.232-63.232a161.024 161.024 0 0 1 227.776 0l63.296 63.232a161.152 161.152 0 0 1 0 227.776l-63.36 63.232z m0 0M443.648 306.688a161.088 161.088 0 0 1-161.088 161.088H193.088A161.024 161.024 0 0 1 32 306.688V217.216A161.024 161.024 0 0 1 193.088 56.128h89.472a161.088 161.088 0 0 1 161.088 161.088v89.472z m0 0M973.504 825.344a161.088 161.088 0 0 1-161.088 161.088h-89.472a161.088 161.088 0 0 1-161.088-161.088v-89.472a161.088 161.088 0 0 1 161.088-161.088h89.472a161.088 161.088 0 0 1 161.088 161.088v89.472z m0 0M443.648 825.344a161.088 161.088 0 0 1-161.088 161.088H193.088A161.088 161.088 0 0 1 32 825.344v-89.472a161.024 161.024 0 0 1 161.088-161.088h89.472a161.088 161.088 0 0 1 161.088 161.088v89.472z m0 0"
                p-id="4710" :fill="props.active ? icon.active : icon.inactive"></path>
            </svg>
          </template>
        </van-tabbar-item>
        <van-tabbar-item to="/home/shoppingcart">
          <span>购物车</span>
          <template #icon="props">
            <svg t="1651484582885" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="7910" width="20" height="20">
              <path
                d="M765.747191 747.906871c-16.919345 0-32.692586 4.964058-45.978171 13.482059L411.612639 761.38893c-13.285584-8.518001-29.058826-13.482059-45.978171-13.482059-0.048095 0-0.094144 0.00307-0.14224 0.004093l-6.835685-62.492286 472.706065 0 129.429815-436.82588L298.022581 248.592798l-78.308507-111.868857L66.179258 136.723941l0 51.16531 126.895085 0 66.281589 94.686523 58.34585 393.836787-1.193175 0.130983 8.908904 81.446987c-26.891464 14.408151-45.230134 42.780339-45.230134 75.363432 0 47.115064 38.331004 85.446068 85.446068 85.446068s85.446068-38.331004 85.446068-85.446068c0-10.945283-2.091638-21.405519-5.858428-31.03176l240.936421 0c-3.76679 9.626241-5.858428 20.086477-5.858428 31.03176 0 47.115064 38.331004 85.446068 85.446068 85.446068s85.446068-38.331004 85.446068-85.446068S812.862255 747.906871 765.747191 747.906871zM365.634468 877.866758c-24.545022 0-44.51382-19.968797-44.51382-44.51382s19.968797-44.51382 44.51382-44.51382 44.51382 19.968797 44.51382 44.51382S390.178467 877.866758 365.634468 877.866758zM765.747191 877.866758c-24.545022 0-44.51382-19.968797-44.51382-44.51382 0-12.059664 4.827959-23.006993 12.642948-31.03176l3.158946 0 0-2.947122c7.757684-6.564509 17.776875-10.534937 28.711925-10.534937 24.545022 0 44.51382 19.968797 44.51382 44.51382S790.292214 877.866758 765.747191 877.866758z"
                p-id="7911" :fill="props.active ? icon.active : icon.inactive"></path>
            </svg>
          </template>
        </van-tabbar-item>
        <van-tabbar-item to="/home/login">
          <span>我的</span>
          <template #icon="props">
            <svg t="1651484843685" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="8971" width="16" height="16">
              <path
                d="M521.798086 543.293888c149.770748 0 271.746924-121.976177 271.746925-271.746925S671.568834 0 521.798086 0 250.051162 121.976177 250.051162 271.746924s121.976177 271.546963 271.746924 271.546964zM942.115993 775.248584c-19.396212-41.591877-46.990822-79.184534-81.983988-111.778168-70.386253-65.387229-164.567858-102.979887-258.14958-102.979887h-160.168717c-93.781683 0-187.763327 37.592658-258.14958 102.979887-34.993165 32.593634-62.587776 70.186292-81.983987 111.778168-20.396016 43.791447-30.793986 89.782464-30.793986 137.173209 0 61.587971 49.990236 111.578207 111.578207 111.578207h678.867409c61.587971 0 111.578207-49.990236 111.578208-111.578207-0.199961-47.390744-10.397969-93.581722-30.793986-137.173209z"
                :fill="props.active ? icon.active : icon.inactive" p-id="8972"></path>
            </svg>
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
    <!-- 底部的tabbar结束 -->
  </div>
</template>

<script>
// @ is an alias to /src
import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';
Vue.use(Tabbar);
Vue.use(TabbarItem);
export default {
  data() {
    return {
      active: 0,
      icon: {
        active: '#ff0378',
        inactive: '#535353',
      },
    };
  },
  name: 'HomeView',
  components: {},
};
</script>
<style lang="less" scoped>
.my-home {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .my-home-main {
    flex: 1;
  }

  .my-home-tabbar {
    height: 0.5rem;
  }
}
</style>
